<template>
  <!-- :visible="isShowDialog"用于控制对话框的显示和隐藏。
  @close="close"当对话框被关闭时触发该方法。 -->
  <!-- :close-on-click-modal="false"：这个属性用于设置是否在点击对话框外部区域时关闭对话框。 -->
  <el-dialog :title="title" :visible="isShowDialog" :close-on-click-modal="false" @close="close">
    <div class="form-container">
      <el-form ref="formData" class="form" :rules="rules" label-width="80px" size="mini" :model="formData">
        <!-- ref:点击提交按钮的来获取el-form组件实例->全部表单的效验 -->
        <!-- rules 表单效验规则 -->
        <!-- prop:是当前表单组件要验证的字段名称
        v-model是双向绑定 -->
        <!-- autocomplete="off" 禁止浏览器自动填充数据在表单 -->
        <el-form-item label="车辆类型" prop="truckTypeId" label-width="100px">
          <el-select v-model="formData.truckTypeId" autocomplete="off" placeholder="请选择" style="width: 80%" size="medium">
            <el-option
              v-for="item in carList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码" prop="licensePlate" label-width="100px">
          <el-input v-model="formData.licensePlate" autocomplete="off" placeholder="请输入车牌号码" style="width: 80%" size="medium" />
        </el-form-item>
        <el-form-item label="GPS设备ID" prop="deviceGpsId" label-width="100px">
          <el-input v-model="formData.deviceGpsId" autocomplete="off" placeholder="请输入GPS设备ID" style="width: 80%" size="medium" />
        </el-form-item>
      </el-form>
    </div>
    <!-- 具名插槽 ，用于插入自定义内容到对应的插槽位置。可以在组件的特定位置插入自定义的底部内容，
      从而实现定制化的对话框布局和功能。-->
    <div slot="footer" class="dialog-footer">
      <el-button class="stbList" type="primary" @click="confirm">确 定</el-button>
      <el-button class="addList" @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addEnterpriselis } from '@/api/enterprise'
import { getVehicleList } from '@/api/vehicle'
export default {
  name: 'AddEnterprise',
  props: {
    title: {
      type: String,
      // 在没有传入值是默认为字符串
      default: '新增车辆'
    },
    isShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 表单数据
      formData: {
        truckTypeId: '', // 车辆类型id
        licensePlate: '', // 车牌号码
        deviceGpsId: '' // GPS设备ID
      },
      carList: [], // 下拉车辆类型列表
      // 表单校验规则
      rules: {
        truckTypeId: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '车牌号码不能为空', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5][A-Z]\w{1,5}$/, message: '请输入正确的车牌号码', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: 'GPS设备ID不能为空', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]{1,20}$/, message: '请输入正确的GPS设备ID', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    // 获取车型列表
    const result = await getVehicleList()
    this.carList = result.data
  },
  methods: {
    async confirm() {
      // 表单校验
      await this.$refs.formData.vaildate()
      console.log('表单校验成功')
      // 发送新增请求
      await addEnterpriselis(this.formData)
      this.$message.success('添加成功')
      // 通知父组件,刷新数据
      this.$emit('refreshvehicle')
      // 关闭弹窗
      this.close()
    },
    // 取消
    close() {
      // 重置表单
      this.$refs.formData.resetFields()
      // 关闭弹窗
      this.$emit('update:isShowDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.input-with-margin {
  margin-bottom: 25px;
}
.form {
  width: 400px;
}
.dialog-footer{
  display: flex;
  align-content: center;
  justify-content: center;
}
  .stbList{
    color: white;
    background-color: rgb(227, 66, 66);
    border-color: rgba(0, 0, 0, 0);

  }
  .addList{
    color: black;
    background-color:white;
    border-color:black
  }
</style>
